<!-- 编辑用户 -->
<template>
  <Dialog v-model="dialogShow" :title="dialogTitle" width="840px" @confirm="confirm" @close="close" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="use-dialog-header">
        <div :id="titleId" :class="titleClass">新用户注册</div>
        <div class="close">
          <el-icon @click="close">
            <CloseBold />
          </el-icon>
        </div>
      </div>
    </template>
    <div class="main">
      <el-form ref="formRef" class="form" label-position="top" :model="formData" :rules="rules">
        <el-form-item prop="type">
          <template #label>
            <div class="label">
              <div class="num">1</div>
              注册类型
            </div>
          </template>
          <el-radio-group v-model="formData.type">
            <el-radio value="COMPANY">企业</el-radio>
            <el-radio value="PERSON">个人</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="formData.type === 'COMPANY'">
          <el-form-item prop="categoryCodes">
            <template #label>
              <div class="label">
                <div class="num">2</div>
                企业类型
              </div>
            </template>
            <el-checkbox-group v-model="formData.categoryCodes">
              <el-checkbox
                v-for="(item, index) in categoryList"
                :key="index"
                :label="item.categoryName"
                :value="item.categoryCode"
              />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item prop="companyScale">
            <template #label>
              <div class="label">
                <div class="num">3</div>
                您的企业规模
              </div>
            </template>
            <el-radio-group v-model="formData.companyScale">
              <el-radio :value="1">0-50人</el-radio>
              <el-radio :value="2">51-200人</el-radio>
              <el-radio :value="3">200人以上</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="companyName">
            <template #label>
              <div class="label">
                <div class="num">4</div>
                您的企业名称
              </div>
            </template>
            <el-input v-model="formData.companyName" placeholder="请输入您的企业名称"></el-input>
          </el-form-item>
        </template>
        <el-form-item prop="contactName">
          <template #label>
            <div class="label">
              <div class="num">{{ formData.type === "PERSON" ? 2 : 5 }}</div>
              联系人姓名
            </div>
          </template>
          <el-input v-model="formData.contactName" placeholder="请输入联系人姓名"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <template #label>
            <div class="label">
              <div class="num">{{ formData.type === "PERSON" ? 3 : 6 }}</div>
              联系人电话
            </div>
          </template>
          <el-input v-model="formData.phone" placeholder="请输入联系人电话"></el-input>
        </el-form-item>
        <el-form-item prop="validateCode">
          <template #label>
            <div class="label">
              <div class="num">{{ formData.type === "PERSON" ? 4 : 7 }}</div>
              验证码
            </div>
          </template>
          <div class="flex-btw w-full">
            <el-input class="captcha" v-model="formData.validateCode" placeholder="请输入验证码" clearable></el-input>
            <send-code
              class="send-code"
              type="phone"
              :params="{ phone: formData.phone, type: 'USER_REGISTER' }"
              :elRef="formRef"
              :round="false"
            />
          </div>
        </el-form-item>
      </el-form>
      <p class="tip">注意：提交注册成功后即可使用手机号进行登录，且初始密码为手机号后四位，登录后可修改密码。</p>
    </div>
    <template #footer>
      <div class="btns">
        <div><el-button round size="large" type="primary" @click="confirm">提交注册</el-button></div>
      </div>
    </template>
  </Dialog>
</template>

<script setup>
import api from "@/api";
const dialogTitle = ref("");
const dialogShow = ref(false);

const formRef = ref();
const formData = ref({
  type: "COMPANY",
  validateCode: null,
});

const rules = {
  type: [{ required: true, message: "请选择注册类型", trigger: "change" }],
  categoryCodes: [{ required: true, type: "array", message: "请选择企业类型", trigger: "change" }],
  companyScale: [{ required: true, message: "请选择企业规模", trigger: "change" }],
  phone: [{ required: true, message: "请输入联系人电话", trigger: "blur" }],
  companyName: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
  contactName: [{ required: true, message: "请输入联系人姓名", trigger: "blur" }],
  validateCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};

const show = (title, row) => {
  dialogTitle.value = title;
  dialogShow.value = true;
};

// 获取列表
const categoryList = ref();
const getCategory = () => {
  api.post(`/serviceCategory/queryList`).then((res) => {
    categoryList.value = res;
  });
};

const confirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      await api.post(
        "/user/add",
        { ...formData.value, categoryCodes: formData.value.categoryCodes ? formData.value.categoryCodes.join(",") : null },
        { msg: true, loading: true }
      );
      emit("updata");
      reset();
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const close = () => {
  reset();
  console.log("关闭弹窗");
};

// 重置表单
const reset = () => {
  formRef.value.resetFields();
  dialogShow.value = false;
};

onMounted(() => {
  getCategory();
});

const emit = defineEmits(["updata"]);
defineExpose({ show });
</script>
<style lang="scss" scoped>
.main {
  margin: 0 170px;
}

.captcha {
  flex: 1;
  margin-right: 10px;
}

.toggle {
  .el-button--text {
    color: var(--use-color-warning);
    font-size: 16px;
  }
}

.btns {
  margin: 32px 170px;

  .el-button {
    width: 100%;
  }
}

.form {
  .label {
    display: inline-flex;
    align-items: center;

    .num {
      width: 18px;
      height: 18px;
      line-height: 18px;
      border-radius: 2px;
      background: var(--use-color-light-2);
      text-align: center;
      font-size: 12px;
      margin-right: 8px;
    }
  }
}

.tip {
  color: var(--use-color-danger);
}
</style>
